<template>
  <div class="recommend">
      <div class="recommend-item" v-for="(item, index) in recommend" :key="index">
          <a :href="item.link">
              <img :src="item.image" />
              <div class="title">{{item.title}}</div>
          </a>
      </div>
  </div>
</template>
<script>
export default {
   name: 'RecommendView',
   props: {
       recommend: {
           type: Array,
           default() {
               return []
           }
       }
   }
}
</script>
<style scoped>
  .recommend {
      display: flex;
      font-size: 12px;
      padding-top: 10px;
      padding-bottom: 20px;
      border-bottom: 10px solid #eee;
  }
  .recommend-item {
      flex: 1;
      text-align: center;
  }
  .recommend-item img {
      width: 65px;
      height: 65px;
      margin-bottom: 10px;
  }
</style>